<!--hmc 推送商品信息组件-->
<template>
  <div class="page-container page-container-create">
    <div class="stepset mb30">
      <div class="color333 font18">推送商品信息 </div>
    </div>

    <el-form  :model="sendGoodsForm" size="mini" ref="sendGoodsForm">
      <el-form-item prop="goodsId" class="w178 mt30">
        <span class="color333 font16">商品编码：</span>
        <span class="color333 font16">{{this.sendGoodsForm.goodsId}}</span>
      </el-form-item>
      <el-form-item prop="goodsName" class="w178 mt30">
        <span class="color333 font16">商品名称：</span>
        <span class="color333 font16">{{this.sendGoodsForm.goodsName}}</span>
      </el-form-item>
    </el-form>

    <div>
      <div class="flex mt30">
        <span class="color333 font16 mr5">触达方式：</span>
        <el-checkbox-group v-model="checkList" disabled>
          <el-checkbox label="1" v-show="checkList.includes('1')">短信</el-checkbox>
          <el-checkbox label="3" v-show="checkList.includes('3')">邮件</el-checkbox>
        </el-checkbox-group>
      </div>
      <div class="tab-container mt30">
        <el-tabs v-model="activeName" ref="tabs">
          <el-tab-pane v-for="item in tabList" :key="item.key" :label="item.label" :name="item.key"></el-tab-pane>
        </el-tabs>
      </div>
      <div v-show="activeName=='1' && this.checkList.includes('1')">
        <el-form :model="sendGoodsForm.smsJson" size="mini" ref="smsJson">
          <el-form-item   class="mt30 flex" >
            <span class="color333 font16">短信模板：</span>
            <span class="color333 font16">{{this.sendGoodsForm.smsJson.templateName}}</span>
          </el-form-item>
          <el-form-item  class="w178 mt30 txt flex-inner">
            <span class="font16 color333 title">短信内容：</span>
            <span class="font16 color333 lh24" v-html="this.sendGoodsForm.smsJson.previewContent"></span>
          </el-form-item>
        </el-form>
      </div>
      <div v-show="activeName=='3' && this.checkList.includes('3')">
        <el-form :model="sendGoodsForm.mailJson" size="mini" ref="mailJson" >
          <el-form-item  class="mt30 flex">
            <span class="color333 font16">邮件模板：</span>
            <span class="color333 font16">{{this.sendGoodsForm.mailJson.templateName}}</span>
          </el-form-item>
          <el-form-item class="mt30 flex">
            <span class="color333 font16">邮件标题：</span>
            <span class="color333 font16">{{this.sendGoodsForm.mailJson.mailTitle}}</span>
          </el-form-item>
          <el-form-item  class="w178 mt30 txt flex-inner">
            <span class="color333 font16 title">邮件内容：</span>
            <span class="color333 font16 lh24" v-html="this.sendGoodsForm.mailJson.previewContent"></span>
          </el-form-item>
        </el-form>
      </div>
    </div>

    <div class="save t_c mt30">
      <el-button type="primary" @click="handleClose()">确定</el-button>
    </div>

  </div>
</template>

<script>
// 自动化营销-----推送商品信息组件
export default {
  name: "goodsInfo",
  components: {
    
  },
  data() {
    return {
      activeName: "1",
      checkList: ["1", "3"],
      tabList: [ { label: "短信", key: "1" }, { label: "邮件", key: "3" } ],
      sendGoodsForm:{
        goodsId:"",
        goodsName:"",
        smsJson:{
          params:{

          },
          testReceiver:""
        },
        mailJson:{
          mailTitle:"",
          params:{
            
          },
          testReceiver:""
        },
      },
    };
  },
  props: {
    id:Number,
    nodeInfo: {
      type: Object,
    },
    journeyId: {
      type: String,
      default: '',
    }
  },

  methods: {

    //子关闭 标签选择弹框
    handleClose() {
      this.$emit("handleClose", false);
    },
    /**
     * 数据回显
     */
    queryInfo(){
      let that = this;
      this.utils.request.getBranchNodeDetail({branchNodeId: this.nodeInfo.nodeId}, res=>{
        if(res.code == '0000'){
          if(res.data.nodeVariable != null || res.data.nodeVariable != ''){
              //回显数据
              let data = JSON.parse(res.data.nodeVariable);
              that.sendGoodsForm.goodsId = data.goodsId;
              that.sendGoodsForm.goodsName  = data.goodsName;
              //回显reachType
              let reachType = data.reachType.split(",");
              that.checkList = reachType;
              if(reachType.includes("1")){
                that.sendGoodsForm.smsJson = data.smsJson;
                this.sendGoodsForm.smsJson.previewContent = this.sendGoodsForm.smsJson.previewContent.replace(/<p>(.*?)<\/p>/g, '<span>$1</span>');
              }
              if(reachType.includes("3")){
                that.sendGoodsForm.mailJson = data.mailJson;
                this.sendGoodsForm.mailJson.previewContent = this.sendGoodsForm.mailJson.previewContent.replace(/<p>(.*?)<\/p>/g, '<span>$1</span>');
              }
          }
        }
      })
    },
  },

  mounted() {
    this.queryInfo();
  },
  watch:{
    checkList: function(){
      if(!this.checkList.includes("1")){
        this.$refs.tabs.$children[0].$refs.tabs[0].style.display = 'none';
        this.activeName = "3";
      }else{
        this.$refs.tabs.$children[0].$refs.tabs[0].style.display = 'inline-block';
        this.activeName = "1";
      }
      if(!this.checkList.includes("3")){
        this.$refs.tabs.$children[0].$refs.tabs[1].style.display = 'none';
        this.activeName = "1";
      }else{
        this.$refs.tabs.$children[0].$refs.tabs[1].style.display = 'inline-block';
        this.activeName = "3";
      }
    }
  },
  created() {
    
  }
};
</script>
<style lang="scss" scoped>
.stepset {
  ul {
    width: 460px;
  }
  .flex {
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }
}
.el-checkbox {
  margin-right: 30px;
}
/deep/ .el-form {
  .el-form-item {
    margin-top: 30px;
  }
  .btns {
    .el-button {
      margin: 0 30px 0 0;
    }
  }
  .txt {
    /deep/ .el-form-item {
      margin-top: 0px;
    }
    .flex {
      line-height: 3;
      padding: 15px;
      border: 1px solid #dcdfe6;
      border-radius: 4px;
    }
    .el-textarea {
      width: auto;
    }
  }
  .phone {
    .el-form-item__content {
      display: flex;
      justify-content: flex-start;
    }
  }
  
  .textareaParm{
    -webkit-appearance: none;
    background-color: #FFF;
    background-image: none;
    border-radius: 4px;
    border: 1px solid #DCDFE6;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #606266;
    display: inline-block;
    font-size: inherit;
    outline: 0;
    padding: 0 15px;
    -webkit-transition: border-color .2s cubic-bezier(.645,.045,.355,1);
    transition: border-color .2s cubic-bezier(.645,.045,.355,1);
  }
  .buttonParm{
    padding: 0 16px !important;
    border-radius: 4px;
    height: 32px !important;
    line-height: 32px !important;
    font-size: 14px !important;
    background: #FFF;
    border: 1px solid #DCDFE6;
    color: #606266;
    background: #66b1ff;
    border-color: #66b1ff;
    color: #FFF;
    display: inline-block;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    -webkit-appearance: none;
    text-align: center;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    outline: 0;
    margin: 0;
    -webkit-transition: .1s;
    transition: .1s;
    font-weight: 500;
    padding: 12px 20px;
    font-size: 14px;
    border-radius: 4px;
  }
}
</style>

